<template>
  <!-- 品牌详情 -->
  <div class="brand_box">
    <template>
      <div
        id="brandRoot"
        v-if="brandList1 && brandList1.brandName"
        v-title
        :data-title="brandList1.brandName + '-品牌热度|带货数据分析-掌上精选'"
      >
        <!-- loading -->
        <div class="goodsInfTop_loading" v-if="listLoading">
          <div
            style="margin-top: 30px; margin-bottom: 100px"
            v-loading="listLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="leftBox" v-if="!listLoading">
          <div class="Box_top">
            <el-popover
              placement="right"
              width="200"
              popper-class="big_img"
              :visible-arrow="false"
              trigger="click"
               v-if="brandList1.logo"
            >
              <img :src="brandList1.logo" class="logo" slot="reference" @error="brandList1.logo = ''"/>
              <img :src="brandList1.logo" class="logo"/>
            </el-popover>
            <i class="text_logo" v-else>{{brandList1.brandName.slice(0,1)}}</i>
            <p>{{ brandList1.brandName }}</p>
          </div>
          <div class="box_bottom">
            <div class="list_box">
              <span>直播销售额</span>
              <!-- <p>{{ format_num(brandList1.salesTotalPrice) }}</p> -->
              <p>{{ format_num(brandList1.salesLivePrice) }}</p>
            </div>
            <div class="list_box">
              <span>直播销量</span>
              <p>{{ format_num(brandList1.salesLive) }}</p>
            </div>
            <div class="list_box">
              <span>商品总数</span>
              <p>{{ format_num(brandList1.productTotal) }}</p>
            </div>
            <div class="list_box">
              <span>商品总销量</span>
              <p>{{ format_num(brandList1.salesTotal) }}</p>
            </div>
            <div class="list_box">
              <span>商品总销售额</span>
              <p>{{ format_num(brandList1.salesTotalPrice) }}</p>
            </div>
            <!-- <div class="list_box">
              <span>浏览量</span>
              <p style="margin-left: 50px">{{ format_num(brandList1.pv) }}</p>
            </div>
            <div class="list_box">
              <span>订单量</span>
              <p style="margin-left: 50px">
                {{ format_num(brandList1.orderTotal) }}
              </p>
            </div> -->
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="rightBox">
          <div class="btn_group">
            <button
              :class="{ active: input_btn == '数据概览' }"
              @click="input_btn = '数据概览'"
            >
              数据概览
            </button>
            <button
              :class="{ active: input_btn == '关联视频' }"
              @click="input_btn = '关联视频'"
            >
              关联视频
            </button>
            <button
              :class="{ active: input_btn == '关联直播' }"
              @click="input_btn = '关联直播'"
            >
              关联直播
            </button>
            <button
              :class="{ active: input_btn == '关联商品' }"
              @click="input_btn = '关联商品'"
            >
              关联商品
            </button>
            <button
              :class="{ active: input_btn == '关联达人' }"
              @click="input_btn = '关联达人'"
            >
              关联达人
            </button>
          </div>
          <div class="rightBox-content">
            <TheHeatAnalysis v-if="input_btn == '数据概览'" />
            <AssociatedVideo v-if="input_btn == '关联视频'" />
            <AssociatedLive v-if="input_btn == '关联直播'" />
            <AssociatedGoods v-if="input_btn == '关联商品'" />
            <LiveDetails v-if="input_btn == '关联达人'" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import TheHeatAnalysis from "./theHeatAnalysis";
import AssociatedVideo from "./associatedVideo";
import AssociatedLive from "./associatedLive";
import AssociatedGoods from "./associatedGoods";
import LiveDetails from "./liveDetails";
export default {
  data() {
    return {
      input_btn: "数据概览",
      cancel03: "",
      brandList1: {},
      showEg: true,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      listLoading: false,
    };
  },
  components: {
    TheHeatAnalysis,
    AssociatedVideo,
    AssociatedLive,
    AssociatedGoods,
    LiveDetails,
  },
  watch: {
    input_btn: function (newVal, oldVal) {
      if (newVal == "数据概览") {
        this.input_btn = "数据概览";
      } else if ((newVal = "关联视频")) {
        this.input_btn == "关联视频";
      } else if (newVal == "关联直播") {
        this.input_btn == "关联直播";
      } else if (newVal == "关联商品") {
        this.input_btn == "关联商品";
      } else if (newVal == "关联达人") {
        this.input_btn == "关联达人";
      }
    },
  },
  computed: {},
  created() {
    this.brand();
  },
  methods: {
    brand() {
      this.listLoading = true;
      this.$axios
        .get(
          "/api/Brand/DetailsNew",
          {
            params: {
              // brandId: "00e70f6a19075e2092926cf49f44c73f",
              brandId: this.$route.query.id,
            },
          }
          // {
          //   cancelToken: new this.$axios.CancelToken(function executor(c) {
          //     if (this.cancel != null) {
          //       this.cancel();
          //     }
          //     this.cancel = c;
          //   }),
          // }
        )
        .then((res) => {
          this.listLoading = false;
          if (res.data.code == 0 && res.data.data) {
            this.brandList1 = res.data.data;
            // this.brandList = res.data.data;
            // console.log(this.brandList[0]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.br_vip_box {
  margin: 20px 20px 0 20px;
  border-radius: 4px;
  overflow: hidden;
  .el-dialog {
    margin-top: 76px !important;
  }
}
#brandRoot {
  padding-top: 80px;
  // padding-left: 20px;
  //padding-bottom: 20px;
  box-sizing: border-box;
  display: -webkit-box;
  height: 100vh;
  margin-top: -80px;
  background-color: #f1f1f1;
  overflow: hidden;
  letter-spacing: 1px;
  .goodsInfTop_loading {
    width: 340px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    .el-loading-parent--relative {
      width: 100%;
      height: 100px;
    }
  }
  .leftBox {
    width: 300px;
    height: 270px;
    min-width: 300px;
    padding-bottom: 30px;
    border-radius: 6px;
    margin-left: @margin-num;
    margin-right: @margin-num;
    margin-top: @margin-num;
    background: #ffffff;
    .Box_top {
      margin-left: 20px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      .text_logo{
        display: inline-block;
        width: 50px;
        height: 50px;
        color: #ffa500;
        background-color: #fff1e8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-size: 22px;
        cursor: pointer;
        border-radius: 50%;
      }
      p {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0px;
        color: #222222;
        margin-left: 12px;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .box_bottom {
      margin-top: 30px;
      margin-left: 20px;
      .list_box {
        display: flex;
        margin-top: 20px;
        span {
          display: inline-block;
          width: 90px;
          font-size: 12px;
          font-weight: normal;
          color: #888888;
          vertical-align: middle;
        }
        p {
          font-size: 13px;
          font-weight: normal;
          color: #222222;
          margin-left: 5px;
        }
        .margin-p {
          margin-left: 37px;
        }
      }
    }
  }
  .rightBox {
    margin-top: @margin-num;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    .btn_group {
      margin-bottom: 10px;
      .active {
        background-color: #fd7f2c;
        color: #ffffff !important;
      }
      button {
        font-size: 14px;
        color: #555;
        font-weight: 600;
        width: 100px;
        height: 40px;
        background-color: #fff;
        border-radius: 4px;
        margin-right: 7px;
      }
    }
  }
  .rightBox-content {
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 10px;
  }
}
.brand_box {
  width: 100%;
}
</style>
